<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="12" :offset="8">
        <my-date-day v-on:query="queryTable"></my-date-day>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          stripe
          border
          :cell-class-name="tableCellClassName"
        >
          <el-table-column prop="city" label="单位"> </el-table-column>
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column sortable prop="avg" label="平均准确率">
          </el-table-column>
          <el-table-column sortable prop="submit" label="上报时间">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import myDateDay from "../../myDateDay";
export default {
  components: {
    myDateDay,
  },
  data() {
    return {
      tableData: [],
      cellData: [[]],
      flag: 0,
    };
  },
  methods: {
    async queryTable(date) {
      const { data: res } = await this.$http.get(
        `/manage1/fhyc/st/vue_fhyc_avgRank?pdate=${date}`
      );
      this.tableData = res.data;
    },
    tableCellClassName({ row, column }) {
      let beginTime = this.$moment(row.date)
        .subtract(1, "days")
        .format("YYYY-MM-DD");
      let flag_9 = this.$moment(row.submit).isBefore(beginTime + " 09:00:00");
      let flag_17 = this.$moment(row.submit).isBefore(beginTime + " 17:00:00");
      let rate = row.avg >= 90 ? true : false;
      if (column.property == "submit") {
        if (flag_9) {
          return "normal";
        } else if (!flag_17) {
          return "danger";
        } else {
          return "warning";
        }
      }
      if (column.property == "avg") {
        if (rate) {
          return "warning";
        } else {
          return "danger";
        }
      }
    },
  },
};
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>